import { getCurrentInstance } from '@tarojs/runtime';
import Taro, { useLoad } from '@tarojs/taro';
import React, { useCallback, useEffect, useState } from 'react';
import { AnimatingNumbers, Cell, ConfigProvider, Image, Loading } from '@nutui/nutui-react-taro';
import { Router } from '@tarojs/runtime/dist/current';
import "./detail.scss";

import ActerCard from '../../components/ActerCard';







type movieDataProps = {
    celebrities: actorProps[],//演员
    movie: movieProps,//电影 
};

type actorProps = {
    id: number,//演员id
    cnm: string,//演员名称
    enm: string,//演员英文名称
    avatar: string,//演员头像
    desc: string,//职能,导演，饰：...
    roleDetail: string,//演员角色详情
    roles: string,//饰演角色
    still: string,//角色剧照
};

type movieProps = {
    id: number,//电影id
    nm: string,//电影名称
    enm: string,//电影英文名称
    cat: string,//电影类型
    dir: string,//导演
    pubDesc: string,//上映时间
    dra: string,//电影简介
    img: string,//电影封面海报
    backgroundColor: string,//背景颜色
    rt: string,
    star: string,//主演
    photos: string[],//剧照
    vediourl: string,//预告片mp4
    watched: number;//观影人次
    wish: number;//想看人数
    shortComment?: { content: string; } | undefined;//短评
    snum: number;//评价人数
};


const Detail = () => {

    console.log((getCurrentInstance().router as Router).params.id);


    const [movieData, setMovieData] = useState<movieDataProps>();
    const [photosRatio, setPhotosRatio] = useState<number[]>([]);
    const photosRatio0: number[] = [];

    useLoad(() => {
        // 获取动态路由参数 id
        const { id } = (getCurrentInstance().router as Router).params as { id: string; }; // 使用 as 断言类型为 { id: string }，确保 id 是 string 类型的属性;
        console.log('动态参数 id:', id);
        //请求电影详情数据
        Taro.request({
            url: `https://apis.netstart.cn/maoyan/movie/detail?movieId=${id}`,
            success: function (res) {
                setMovieData(res.data);
                async function getphotosHeight() {
                    const { photos } = res.data.movie;
                    try {
                        for (let i = 0; i < photos.length; i++) {
                            await Taro.getImageInfo({
                                src: photos[i],
                                success: (res2) => {
                                    const ratio = res2.width / res2.height;
                                    photosRatio0.push(ratio * 250);
                                },
                                fail: (err) => {
                                    console.error('获取图片尺寸失败', err);
                                }
                            });
                        }
                        setPhotosRatio(photosRatio0);

                    } catch (error) {
                        console.error('Error fetching city ID:', error);
                    }

                }
                getphotosHeight();
                console.log(photosRatio); // 输出图片的宽高比数组
                console.log("width", photosRatio[0]); // 输出图片的宽高比数组
            }
        });

    });
    console.log(movieData);



    if (!movieData) {
        return <div>Loading...</div>; // 或者其他适当的加载状态
    } else {
        // 解构movie数据
        const { id, nm, enm, star, cat, shortComment, img, pubDesc, dra, backgroundColor, wish, watched, snum, photos } = movieData.movie;




        //组件页面
        return (
            <div className='detailContainer' style={{ backgroundColor: backgroundColor }}>

                <div className='detailHeader'>
                    <div className='posterImg'>
                        <img src={img} alt={nm} />
                        {/* <img className='playButton' src="/playbutton.png" alt="播放按钮"></img> */}
                    </div>

                    <div className='posterText'>
                        <h1>{nm}</h1>
                        <p>{enm}</p>
                        <p>类型:{cat}</p>
                        <p>主演:{star}</p>
                        <p>{pubDesc}</p>
                    </div>
                </div>
                <div className='hotContainer'>
                    <div className='hotMain'>
                        <h1>热门指数</h1>
                        <div className='hotData'>
                            <div style={{ borderRight: "1px solid white" }}>
                                <p>想看人数</p>

                                <ConfigProvider theme={{ nutuiCountupColor: "orange", nutuiCountupHeight: '16px', }}>
                                    <AnimatingNumbers.CountUp value={String(wish)} />
                                </ConfigProvider>

                                {/* <Cell style={{ color: "orange", backgroundColor: "inherit", boxShadow: "none" }} title={<AnimatingNumbers.CountUp value={String(wish)} />} /> */}
                            </div>
                            <div style={{ borderRight: "1px solid white" }}>
                                <p>看过人数</p>
                                <ConfigProvider theme={{ nutuiCountupColor: "orange", nutuiCountupHeight: '16px', }}>
                                    <AnimatingNumbers.CountUp value={String(watched)} />
                                </ConfigProvider>
                            </div>
                            <div>
                                <p>评价人数</p>
                                <ConfigProvider theme={{ nutuiCountupColor: "orange", nutuiCountupHeight: '16px', }}>
                                    <AnimatingNumbers.CountUp value={String(snum)} />
                                </ConfigProvider>
                            </div>
                        </div>
                        <p className='shortComment'>{shortComment ? `👍${shortComment.content}` : "暂无热门短评"}</p>

                    </div>
                </div>
                <div className='detailIntro'>
                    <h1>简介:</h1>
                    {dra.split("\n").map((p, index) => <p key={index} style={{ lineHeight: "1.5" }}>{p}</p>)}
                </div>
                <div className='stagePhotoContainer'>
                    <h1>剧照</h1>
                    {photosRatio[0] ? <div>
                        {photos.map((photo, index) => <Image style={{ flexShrink: "0" }} key={index} width={`${photosRatio[index] + "px"}`} height='250' src={photo} />)}
                    </div> : <Loading>加载中</Loading>}

                </div>

                <div className='starContainer'>
                    <h1>主要演员表:</h1>
                    <div>
                        {movieData.celebrities.map((item) => <ActerCard key={item.id} acterList={item} />)}
                    </div>

                </div>

            </div>
        );
    }

};

export default Detail;
